<template>
  <div class="container">
    <h1 style="text-align: center; padding: 15px 0; color: #fff">
      人员情报管理数据驾驶舱
    </h1>
    <el-row :gutter="36">
      <el-col :span="18">
        <div :style="{ height: getWindowHeight - 66 + 'px' }" style="display: flex; flex-flow: column">
          <div style="display: flex">
            <div style="width: 40%">
              <h3 style="font-size: 16px; color: #4bc1cd; margin-bottom: 10px">
                人员配备
              </h3>
              <div style="margin-bottom: 20px; height: 180px">
                <div style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  ">
                  <span style="font-size: 14px; color: #4bc1cd">各类人员分布</span>
                  <div style="margin-right: 20px; margin-bottom: 10px">
                    <treeselect v-model="chart1_1" class="input-w100 mr12" size="mini" :options="deptTreeList" @select="getStatisticsWithMajorCode"
                      :show-count="true" placeholder="请选择" />
                  </div>
                </div>
                <div ref="chart1" style="width: 100%; height: 100%"></div>
              </div>
              <div style="margin-bottom: 20px; height: 180px">
                <div style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 10px;
                  ">
                  <span style="font-size: 14px; color: #4bc1cd">满期人员统计</span>
                  <div style="margin-right: 20px">
                    <treeselect v-model="chart2_1" class="input-w100 mr12" size="mini" :options="deptTreeList"
                      :show-count="true" placeholder="请选择" @select="getStatisticsWithMilitaryServiceStatus"/>
                  </div>
                </div>
                <div ref="chart2" style="width: 100%; height: 100%"></div>
              </div>
              <div style="margin-bottom: 20px; height: 180px">
                <div style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 10px;
                  ">
                  <span style="font-size: 14px; color: #4bc1cd">人才库统计</span>
                  <div style="margin-right: 20px">
                    <el-select v-model="chart3_1" placeholder="请选择" clearable filterable size="mini" style="width: 100px"
                      @change="getStatisticsPersonalTalentSummary">
                      <el-option v-for="dict in dict.type.sys_user_major_code" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </div>
                </div>
                <div ref="chart3" style="width: 100%; height: 100%"></div>
              </div>
            </div>
            <div style="width: 60%">
              <div ref="chart4" style="width: 100%; height: 400px"></div>
            </div>
          </div>
          <h3 style="font-size: 16px; color: #4bc1cd; margin-bottom: 10px;display:flex;align-items:center;width:40%;justify-content: space-between;">
            人员在位
            <treeselect v-model="chart1_3" class="input-w100 mr12" size="mini" :options="deptTreeList"
                        :show-count="true" placeholder="请选择" @select="getStatisticsWorkingStatus"/>
          </h3>
          <div style="display: flex; flex-grow: 1">
            <div style="
                display: flex;
                align-items: center;
                flex: 0 0 500px;
                justify-content: space-between;
                margin-right: 100px;
              ">
              <div style="
                  display: flex;
                  flex-flow: column;
                  align-items: center;
                  border-radius: 50%;
                  justify-content: center;
                  width: 80px;
                  height: 80px;
                  border: 1px solid #1cc1db;
                  color: #1cc1db;
                " v-for="(item,index) of statisticsWorkingStatus" :key="index">
                <div>{{ item.name }}</div>
                <div>{{ item.val }}</div>
              </div>
            </div>
            <!-- <div ref="chart5" style="width: 100%; height: 100%"></div> -->
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <h3 style="font-size: 16px; color: #4bc1cd; margin-bottom: 10px">
          装备配备
        </h3>
        <div style="display: flex; align-items: center">
          <div ref="chart6" style="flex: 1; height: 250px"></div>
        </div>
        <div style="margin-bottom: 10px">
          <span style="font-size: 14px; color: #4bc1cd">本月装备配发统计</span>
        </div>
        <div ref="chart7" style="width: 100%; height: 210px"></div>
        <div style="display: flex; justify-content: space-evenly">
          <div style="
              display: flex;
              flex-flow: column;
              align-items: center;
              border-radius: 50%;
              justify-content: center;
              width: 80px;
              height: 80px;
              border: 1px solid #1cc1db;
              color: #1cc1db;
            ">
            <div style="font-size:14px">装备配发率</div>
            <div>{{ statisticsEquipmentAllotment || '-' }}</div>
          </div>
        </div>
        <div style="margin-bottom: 10px; margin-top: 30px">
          <span style="font-size: 14px; color: #4bc1cd">装备类别情况</span>
        </div>
        <div style="
            display: flex;
            background: rgb(116 116 116 / 14%);
            border: 1px solid #4bc1cd;
            padding: 5px 10px;
            margin-bottom: 5px;
          " v-for="(item, index) of statisticsEquipmentInfosList" :key="index">
          <span style="width: 25%; color: #fff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{
            item.equipmentName }}</span>
          <span style="width: 25%; color: #fff;margin-left">
            {{ selectDictLabel(dict.type.sys_equipment_source, item.sourceId) }}
          </span>
          <span style="width: 20%; color: #fff">{{ item.totalNum }}个</span>
          <span style="width: 30%; color: #ffba6d">完好率{{ item.integrityRate }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
const tibetMapData = require("../../assets/tibet.json");
import { selectAllDepts, statisticsEquipmentInfos, statisticsWorkingStatus, statisticsMonthEquipmentAllotment, statisticsEquipmentAllotmentBySourceId, statisticsEquipmentAllotment, statisticsPersonalTalentSummary, statisticsWithMajorCode, statisticsWithMilitaryServiceStatus } from "@/api/cockpit";
import Treeselect from "@riophae/vue-treeselect";
export default {
  dicts: ['sys_equipment_source', 'sys_user_major_code','sys_military_status','sys_user_staff_status'],
  name: "dataDrivingCockpit",
  components: {
    Treeselect
  },
  data () {
    return {
      mapList: [],
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chart5: null,
      chart6: null,
      chart7: null,
      chart1_1: this.$store.state.user.userInfo.deptId,
      chart1_3: this.$store.state.user.userInfo.deptId,
      chart2_1: this.$store.state.user.userInfo.deptId,
      chart3_1: "",
      statisticsEquipmentInfosList: [],
      statisticsWorkingStatus: [],
      statisticsMonthEquipmentAllotment: [],
      statisticsEquipmentAllotmentBySourceId: [],
      statisticsPersonalTalentSummary: [],
      statisticsWithMajorCode: [],
      statisticsWithMilitaryServiceStatus: [],
      statisticsEquipmentAllotment:''
    };
  },
  computed: {
    getWindowHeight: () => {
      return (
        document.documentElement.clientHeight || document.body.clientHeight
      );
    },
    deptTreeList () {
      return this.$store.state.user.deptTreeList
    },
    deptList () {
      return this.$store.state.user.deptList
    },
  },
  mounted () {
    console.log(this.$store.state.user.userInfo.deptId)
    this.$store.dispatch('app/toggleSideBar')
    this.$nextTick(() => {
      this.getMap()
      this.statisticsEquipmentInfos()
      this.getStatisticsWorkingStatus()
      this.getStatisticsMonthEquipmentAllotment() //本月装备配发统计
      this.getStatisticsEquipmentAllotmentBySourceId() // 来源统计
      this.getStatisticsPersonalTalentSummary() // 人才库统计
      this.getStatisticsWithMajorCode()
      this.getStatisticsWithMilitaryServiceStatus()//满期统计
      this.getStatisticsEquipmentAllotment() //配发率
      // this.initChar4()
      this.initChar5()
      this.initChar7()
    });
  },
  methods: {
    // 人员分布
    initChar1 () {
      this.chart1 = echarts.init(this.$refs.chart1);
      let nameList = []
      let valList = []
      this.statisticsWithMajorCode.map(item => {
        nameList.push(this.selectDictLabel(this.dict.type.sys_user_major_code, item.majorCode))
        valList.push(item.counts)
      })
      this.chart1.setOption({
        grid: {
          left: "13%",
          right: "20px",
          top: "5%",
          bottom: "37%",
        },
        yAxis: {
          type: "category",
          data: nameList,
          axisLabel: {
            color: "#4bc1cd", // 设置 y 轴刻度值字体颜色为 #4bc1cd
          },
        },
        xAxis: {
          type: "value",
          axisLabel: {
            color: "#4bc1cd", // 设置 y 轴刻度值字体颜色为 #4bc1cd
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            data: valList,
            type: "bar",
          },
        ],
      });
    },
    // 满期
    initChar2 () {
      this.chart2 = echarts.init(this.$refs.chart2);

      let nameList = []
      let valList = []
      this.statisticsWithMilitaryServiceStatus.map(item => {
        nameList.push(this.selectDictLabel(this.dict.type.sys_military_status, item.militaryServiceStatus))
        valList.push(item.counts)
      })

      this.chart2.setOption({
        grid: {
          left: "13%",
          right: "20px",
          top: "5%",
          bottom: "37%",
        },
        xAxis: {
          type: "category",
          data: nameList,
          axisLabel: {
            color: "#4bc1cd", // 设置 y 轴刻度值字体颜色为 #4bc1cd
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#4bc1cd", // 设置 y 轴刻度值字体颜色为 #4bc1cd
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            data: valList,
            type: "line",
            lineStyle: {
              color: "#22b86e",
            },
            areaStyle: {
              color: "rgba(34, 184, 110, 0.6)",
            },
          },
        ],
      });
    },
    // 人才库统计
    initChar3 () {
      this.chart3 = echarts.init(this.$refs.chart3);
      let nameList = []
      let valList = []
      this.statisticsPersonalTalentSummary.map(item => {
        nameList.push(this.selectDictLabel(this.dict.type.sys_user_major_code, item.majorCode))
        valList.push(item.cnt)
      })

      this.chart3.setOption({
        grid: {
          left: "13%",
          right: "20px",
          top: "5%",
          bottom: "37%",
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#4bc1cd", // 设置 y 轴刻度值字体颜色为 #4bc1cd
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
          },
        },
        xAxis: {
          type: "category",
          data: nameList,
          axisLabel: {
            color: "#4bc1cd", // 设置 y 轴刻度值字体颜色为 #4bc1cd
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            barGap: 0,
            data: valList,
          }
        ],
      });
    },
    initChar4 () {
      echarts.registerMap("西藏", tibetMapData);
      let geoCoordMap = {}
      let mapData = []
      this.mapList.map(item => {
        geoCoordMap[item.deptName] = [item.lng, item.lat]
        mapData.push({
          name: item.deptName,
          value: {
            troops: item.cnt || 0, leader: item.leader, type: 1
          }
        })
      })
      this.chart4 = echarts.init(this.$refs.chart4);
      this.chart4.setOption({
        tooltip: {
          trigger: "item",
          renderMode: "html",
          className: "tooltip",
          formatter: function (params) {
            if (params.componentSubType === "effectScatter" && params.value[2].type === 1) {
              return `<div class="chen">${params.name}<br/>负责人：${params.value[2].leader}<br/>人数：${params.value[2].troops}</div>`;
            }
          },
        },
        geo: {
          map: "西藏",
          roam: false,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#3b63ba",
              borderColor: "#00091a",
              shadowColor: "#00091a",
              shadowBlur: 20,
            },
          },
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            data: this.convertData(mapData, geoCoordMap).map((item) => {
              return {
                name: item.name,
                value: item.value,
              };
            }),
            symbolSize: 20,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#899ffa",
                shadowBlur: 10,
                shadowColor: "#899ffa",
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
            },
          },
          {
            name: "西藏",
            type: "map",
            selectedMode: false,
            mapType: "西藏",
            label: {
              normal: {
                textStyle: {
                  fontSize: 15,
                  fontWeight: "bold",
                  color: "#fff",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#fff", // 在鼠标移入时的文本颜色，这里设置为红色
                },
              },
            },
            //aspectScale: 1.75,
            zoom: 1.2,
            itemStyle: {
              normal: {
                label: { show: true },
                color: "#F4F4F4",
                borderWidth: 0.5,
                borderColor: "#080E1F",
                areaColor: "#3b63ba",
              },
              emphasis: {
                areaColor: "#3b64ba",
              },
            },
          },
        ],
      });
    },
    initChar5 () {
      this.chart5 = echarts.init(this.$refs.chart5);

       let nameList = []
        let valList = []
        this.statisticsWorkingStatus.map(item => {
          nameList.push(this.selectDictLabel(this.dict.type.sys_user_staff_status, item.workingStatus))
          valList.push(item.counts)
          item.name= this.selectDictLabel(this.dict.type.sys_user_staff_status, item.workingStatus)
          item.val = item.counts
        })

      this.chart5.setOption({
        grid: {
          left: "5%",
          top: "5%",
          right: 0,
          bottom: "10%",
        },
        xAxis: {
          type: "category",
          data: nameList,
          axisLabel: {
            color: "#4bc1cd", // 设置 y 轴刻度值字体颜色为 #4bc1cd
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#4bc1cd", // 设置 y 轴刻度值字体颜色为 #4bc1cd
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            data: [82, 89, 90, 93, 93],
            type: "line",
          },
          {
            data: [90, 71, 80, 23, 43],
            type: "line",
          },
          {
            data: [42, 69, 19, 73, 52],
            type: "line",
          },
        ],
      });
    },
    // 来源
    initChar6 () {
      this.chart6 = echarts.init(this.$refs.chart6);
      let tmpList = []
      this.statisticsEquipmentAllotmentBySourceId.map(item => {
        tmpList.push({
          name: this.selectDictLabel(this.dict.type.sys_equipment_source, item.sourceId),
          value: item.totalNum
        })
      })
      this.chart6.setOption({
        title: {
          // text: "装备配发图",
          left: "center",
          textStyle: {
            fontSize: 14,
            color: "#4bc1cd",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          top: "10%",
          left: "center",
          textStyle: {
            color: "#4bc1cd",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: tmpList
          },
        ],
      });
    },
    // 本月
    initChar7 () {
      this.chart7 = echarts.init(this.$refs.chart7);
      let nameList = []
      let valList = []
      this.statisticsMonthEquipmentAllotment.map(item => {
        nameList.push(item.equipmentName)
        valList.push(item.totalNum)
      })
      this.chart7.setOption({
        grid: {
          left: "13%",
          right: "20px",
          top: "5%",
          bottom: "37%",
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#4bc1cd", // 设置 y 轴刻度值字体颜色为 #4bc1cd
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
          },
        },
        xAxis: {
          type: "category",
          data: nameList,
          axisLabel: {
            color: "#4bc1cd", // 设置 y 轴刻度值字体颜色为 #4bc1cd
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            barGap: 0,
            itemStyle: {
              color: "#007dcb", // 设置第一个系列的柱状图颜色为 #2d7dbd
            },
            data: valList,
          },
        ],
      });
    },
    // 查询
    async getMap () {
      this.loading = true;
      const res = await selectAllDepts()
      this.loading = false;
      if (res.code === 200) {
        this.mapList = res.data
        this.initChar4()
      }
    },
    // 装备类别
    async statisticsEquipmentInfos () {
      this.loading = true;
      const res = await statisticsEquipmentInfos()
      this.loading = false;
      if (res.code === 200) {
        this.statisticsEquipmentInfosList = res.data
      }
    },
    // 在位状态
    async getStatisticsWorkingStatus (val) {
      this.loading = true;
      const res = await statisticsWorkingStatus({
        unitCode:this.chart1_3
      })
      this.loading = false;
      if (res.code === 200) {
        this.statisticsWorkingStatus = res.data
        let nameList = []
        let valList = []
        this.statisticsWorkingStatus.map(item => {
          nameList.push(this.selectDictLabel(this.dict.type.sys_user_staff_status, item.workingStatus))
          valList.push(item.counts)
          item.name= this.selectDictLabel(this.dict.type.sys_user_staff_status, item.workingStatus)
          item.val = item.counts
        })
        // this.initChar5()
      }
    },
    // 本月装备配发统计
    async getStatisticsMonthEquipmentAllotment () {
      this.loading = true;
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1; // 加上1是因为月份从0开始计数
      const res = await statisticsMonthEquipmentAllotment(`${year}-${month}`)
      this.loading = false;
      if (res.code === 200) {
        this.statisticsMonthEquipmentAllotment = res.data
        this.initChar7()
      }
    },
    // 来源统计
    async getStatisticsEquipmentAllotmentBySourceId () {
      this.loading = true;
      const res = await statisticsEquipmentAllotmentBySourceId()
      this.loading = false;
      if (res.code === 200) {
        this.statisticsEquipmentAllotmentBySourceId = res.data
        this.initChar6()
      }
    },
    //  
    // 人才库统计
    async getStatisticsPersonalTalentSummary (val) {
      this.loading = true;
      const res = await statisticsPersonalTalentSummary({
        majorCode: this.chart3_1
      })
      this.loading = false;
      if (res.code === 200) {
        this.statisticsPersonalTalentSummary = res.data
        this.initChar3()
      }
    },
    // 人员配备
    async getStatisticsWithMajorCode (val) {
      this.loading = true;
      const res = await statisticsWithMajorCode({
        unitCode: this.chart1_1
      })
      this.loading = false;
      if (res.code === 200) {
        this.statisticsWithMajorCode = res.data
        this.initChar1()
      }
    },
    // 满期人员统计
    async getStatisticsWithMilitaryServiceStatus (val) {
      this.loading = true;
      const res = await statisticsWithMilitaryServiceStatus({
        unitCode: this.chart2_1
      })
      this.loading = false;
      if (res.code === 200) {
        this.statisticsWithMilitaryServiceStatus = res.data
        this.initChar2()
      }
    },
    // 
    // 装备配发率
    async getStatisticsEquipmentAllotment () {
      this.loading = true;
      const res = await statisticsEquipmentAllotment()
      this.loading = false;
      if (res.code === 200) {
        this.statisticsEquipmentAllotment = res.data
      }
    },
    convertData (data, geoCoordMap) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        });
      }
      return res;
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  background-color: #032c49;
  padding: 0 18px;
  box-sizing: border-box;

  .ivu-select-selection {
    background: none;
    border-color: #4bc1cd;
    color: #4bc1cd;

    .ivu-icon {
      color: #4bc1cd;
    }
  }

  .ivu-select-dropdown {
    background: none;
    border: 1px solid #4bc1cd;
    padding: 0;

    .ivu-select-item {
      color: #4bc1cd;
    }

    .ivu-select-item:hover {
      background: none;
    }

    .ivu-select-item-focus {
      background: none;
    }
  }
}
</style>